<template>
  <view :class="theme">

    <view class="m-30 br-20 oh">
      <label class="bg-6 color-2 fs-32" style="padding: 30rpx 50rpx;">使用支付宝认证身份信息</label>
      <view class="bg-2" style="padding: 12rpx 50rpx 50rpx;">
        <label class="height-100" style="border-bottom: 2rpx solid #eeeeee;">
          <text class="fs-28 color-6">真实姓名</text>
          <input v-model="formData.realName" :disabled="!!userInfo.is_auth" class="f1 fs-28 pl-40 pr-40" type="text"
            maxlength="21" placeholder="请输入真实姓名" placeholder-class="color-9" />
        </label>
        <label class="height-100" style="border-bottom: 2rpx solid #eeeeee;">
          <text class="fs-28 color-4">身份证号</text>
          <input v-model="formData.idNumber" :disabled="!!userInfo.is_auth" class="f1 fs-28 pl-40 pr-40" type="text"
            maxlength="21" placeholder="请输入身份证号" placeholder-class="color-9" />
        </label>
        <view class="mt-30 color-6 lh-2">
          <text>
            <text class="color-15">*</text>
            <text>请先安装支付宝并登录已实名的账号后进行认证。</text>
          </text>
          <text>
            <text class="color-15">*</text>
            <text>为保障用户账号安全，需进行身份验证，平台不会在任何情况下泄露您的消息。</text>
          </text>
        </view>

      </view>
    </view>
    <button @click="submit" :disabled="!!userInfo.is_auth" hover-class="tap-hover"
      class="bg-6 color-2 mt-120 ml-50 mr-50 br-16 s">
      {{ ["立即认证", "已完成认证"][userInfo.is_auth] }}
    </button>
  </view>
</template>

<script lang="ts" setup>

import { useMapState } from "@/common/libs/store";
import { isIdCard, uniNavigator, getClient, transformURL } from "@/common/libs/utils";
import { onShow } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";
const { $config = {} } = getApp().globalData || {};

const { theme } = useMapState(["theme"]);
const formData = reactive({
  realName: "",
  idNumber: "",
});
const userInfo = ref<any>({
  is_auth: 0
});

onShow(() => {
  getUserInfo();
});

const getUserInfo = () => {
  uni.showToast({ icon: "loading" });
  uni.request({
    url: $config.API_USER_INFO_GET,
    success({ data }: any) {
      uni.hideToast();
      userInfo.value = data;
      if (data.is_auth) {
        formData.realName = "***";
        formData.idNumber = "***";
      }
    }
  });
}

const submit = () => {
  if (![5, 6].includes(getClient())) {
    uni.showToast({ title: "请前往APP实名认证", icon: "none" });
    return;
  }
  if (!formData.realName) {
    uni.showToast({ title: "请输入真实姓名", icon: "none" });
    return;
  }
  if (!isIdCard(formData.idNumber)) {
    uni.showToast({ title: "请输入正确的身份证号", icon: "none" });
    return;
  }
  uni.showToast({ icon: "loading", mask: true, duration: 9000 });
  uni.request({
    url: "/zfbVerifyId",
    data: {
      id_name: formData.realName,
      id_card: formData.idNumber,
    },
    async success({ data }: any) {
      uni.hideToast();
      uniNavigator({
        url: `alipays://platformapi/startapp?appId=20000067&url=${encodeURIComponent(
          transformURL(data.url, { user_id: userInfo.value.id })
        )}`
      });
    }
  })
}
</script>

<style lang="scss" scoped>
// scss
</style>